<template>
    <div class="sort">
		<div class="header">
			<p>热门文章</p>
		</div>
		<div class="content">
			<!-- <div class="article_list"> -->
				<ul>
					<li class="article_list" v-for="article in articleList" :key="article.id">
						<span class="title">
							<router-link :to="{name:'details',params:{id:article.id}}" v-text="article.title"></router-link>
						</span>
						<span class="views">
						    {{article.views}}
						</span>
					</li>
				</ul>
               <!-- <a class="thumbnail">
                    <img :src="article.list_img_src" alt />
                </a>
                <div class="list_content">
                    <h2 class="title">
                        <router-link :to="{name:'details',params:{id:article.id}}" v-text="article.title"></router-link>
                    </h2>
                    <div class="operation">
                        <div class="information">
                            <span>
                                <i class="el-icon-view"></i> {{article.views}}
                            </span>
                            <span>
                                <i class="el-icon-chat-dot-round"></i> {{article.comments}}
                            </span>
                        </div>
                    </div>
                </div> -->
            <!-- </div> -->
		</div>
	</div>
</template>

<script>
import {getTopViewsArticle} from "@/api/article"
export default {
    data () {
        return {
            articleList:[]
        };
    },
    created(){
        this.getTopArticle();
    },
	watch:{
		"$route"(to,from){
			this.getTopArticle();
		}
	},
    methods: {
        getTopArticle(){
            getTopViewsArticle().then(res => {
                this.articleList = res.articleList;
            })
        }
    }
}
</script>

<style lang='stylus' scoped>
.sort{
    width:100%;
    box-sizing:border-box;
    background:#fff;
    border-radius:4px;
    padding:5px 10px 10px;
    margin-top:20px;
    .header{
        width:100%;
        line-height:35px;
        border-bottom: 1px solid #ddd;
        p{
            display:inline-block;
            border-bottom:2px solid #06aaff;
        }
    }
    .content{
        padding:10px 0;
        .article_list {
            display: flex;
            justify-content: space-between;
            /* height: 90px; */
            padding: 5px 0;
            /* border-bottom: 1px dotted #e9eaed; */
            /* &:hover {
                .thumbnail img{
                    transform: scale(1.5)
                }
            } */
			.title{
				flex:0 0 190px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				a {
				    color: #464646;
				    text-decoration: none;
				    transition: all .4s
				    font-size:14px;
				    &:hover{
				        color:#06aaff;
				    }
				}
			}
			
            
            /* .thumbnail {
                display: block;
                width: 120px;
                height: 90px;
                border-radius: 3px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    cursor: pointer
                    transition: all .6s
                }
            } */

            .list_content {
                position: relative;
                flex: 1;
                margin-left: 10px;

                .title {
                    font-weight: normal;
                    margin-bottom: 10px;
                    line-height:20px;
                    word-break:break-all;
                    a {
                        color: #464646;
                        text-decoration: none;
                        transition: all .4s
                        font-size:16px;
                        &:hover{
                            color:#06aaff;
                        }
                    }
                }
                .operation {
                    position:absolute;
                    bottom:0;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    margin-top: 10px;

                    .information {
                        color: #f2be45;
                        font-size: 12px;

                        span {
                            margin-right: 10px;
                        }
                    }
                }
         
            }
        }
    }
}
</style>